<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>换肤</title>
    <style>
      li {
        list-style-type: none;
        float: left;
        width: 80px;
        height: 100px;
        margin-left: 10px;
        margin-top: 10px;
      }
      body {
        background-image: url("img/background.png");
      }
      ul {
        margin: 0 auto;
        width: 300px;
        height: 120px;
        background-color: #4c4c4c;
      }
    </style>
  </head>
  <body>
    <ul>
      <li>
        <img src="img/background.png" width="80px" height="100px" class="btn" />
      </li>
      <li>
        <img
          src="img/background1.png"
          width="80px"
          height="100px"
          class="btn"
        />
      </li>
    </ul>
    <script>
      var body = document.body;
      var but = document.querySelectorAll(".btn");
      for (let i = 0; i < but.length; i++) {
        but[i].onclick = function () {
          body.style.backgroundImage = `url(${this.src})`;
        };
      }
    </script>
  </body>
</html>
